<template>
  <div class="container-width app-container">
      <div class="select-warp">
        <courseSelect  @select="sortSelect" :sorts="lessonSorts"></courseSelect>
      </div>
    
    <el-row>
      
      <el-col :offset="2" :span="20" class="QAwarp">
          <div flex="main:justify" style="display:flex; justify-content:space-between">
              <p flex="cross:center" style="font-size:22px; display:flex; align-items:center;">精华答疑 <span class="icon-icon-test Qicon iconfont"></span></p>
              <div flex="main:left" style="display:flex; justify-content:flex-start">
                  <p class="QAselect" :class="activeIndex===0?'active':''" @click="changeTab(0)">最新回复</p>
                  <p class="QAselect" :class="activeIndex===1?'active':''" @click="changeTab(1)">最新提问</p>
              </div>
          </div>
        <qaItem v-for="(item,index) in QAList" :class="index===(QAList.length-1)?'':'border-bottom'" style="padding-right:0" :QAItem="item" :key="index"></qaItem>
        <el-empty v-if="QAList.length<=0"></el-empty>
      </el-col> 
      


      <!-- <el-col class="QAwarp" :span="8" :offset="2">
          <div class="hot-title" flex="main:left cross:center">
              <p>热门答疑</p>
             <img src="../../../assets/image/labels/hot.png" class="hot"/>
             <img src="../../../assets/image/labels/hot.png" class="hot"/>
             <img src="../../../assets/image/labels/hot.png" class="hot"/>
             <img src="../../../assets/image/labels/hot.png" class="hot"/>
             <img src="../../../assets/image/labels/hot.png" class="hot"/>
          </div>
          <QAhot v-for="(item,index) in hotQAList" :QA="item" :key="index"></QAhot>
          <el-empty v-if="hotQAList.length<=0"></el-empty>
      </el-col> -->
    </el-row>
  </div>
</template>

<script lang="ts">
import courseSelect from "../course/courseSelect.vue";
import qaItem from "/@/components/qaItem.vue";
// import QAhot from "./QAhot.vue";
//import {mapGetters} from 'vuex'
import { bestqa , hotqa } from '/@/api/qaApi'

let lessonSorts = [];

export default {
  components: {
    courseSelect,
    qaItem,
  },
  computed:{
      //...mapGetters(['lessonSorts','lessonMode'])
  },
  data() {
    return {
      activeIndex:0,
      QAList: [],
      hotQAList:[],
      lessonSorts:[],
    };
  },
  mounted(){
    this.getBestQA()
    // this.getHotQA()
  },
  methods:{
      changeTab:function(index){
          this.activeIndex = index
      },
       sortSelect(id){
        this.getBestQA(id)
      },
      getBestQA(firstCourseType){
        bestqa({firstCourseType:firstCourseType}).then(res=>{
            const {questionInfos} = res
            this.QAList = questionInfos||[]
        }).catch(()=>{})
      },
      getHotQA(){
        hotqa().then(res=>{
            const {questionInfos} = res
            this.hotQAList = questionInfos||[]
        }).catch(()=>{})
      }
  }
};
</script>

<style lang="scss"  scoped>
.border-bottom{
   border-bottom: 1px solid #ffefe8;
}
.QAwarp{
       box-shadow: 0 0 10px rgba(219,124,65,0.1);
    border-radius:6px;
    padding:20px;
}
.QAselect{
    font-size:16px;
    height:24px;
    border-radius:12px;
    width: 90px;
    text-align: center;
    color: #ec620d;
    background-color:#ffffff;
    border:1px solid #ec620d;
    margin-left:20px;
      cursor: pointer;
}
.active{
    background: #ec620d;
    color: #ffffff;

  
}
.Qicon{
    font-size:28px;
    color: #e85900;
    margin-left:10px
}
.hot {
  
  width: 30px;
  height: 30px
}
.hot-title{
    margin-bottom: 30px;
    height: 40px;
    line-height: 40px;
}

</style>